<template>

	<view class="page">
		<view class="top-view">
			<u-search placeholder="请输入搜索内容" v-model="queryParams.name" height="68rpx" bgColor="#F4F6F8" @search="search"
				:showAction="false"></u-search>
			<view class="search-wrap flexACB">
				<view class="search-item" @click="provincesShow = true">
					<view class="text">
						{{queryParams.province?queryParams.province : '地区'}}
					</view>
					<image class="down" src="../../../static/img/icon-down.png" mode="widthFix"></image>
				</view>
				<view class="search-item" @click="chooseHy">
					<view class="text">
						{{queryParams.type?queryParams.typeName : '行业筛选'}}
					</view>
					<image class="down" src="../../../static/img/icon-down.png" mode="widthFix"></image>
				</view>
				<view class="search-item" @click="chooseHyfl">
					<view class="text">
						{{queryParams.hyflParent?queryParams.hyflParent : '行业分类'}}
					</view>
					<image class="down" src="../../../static/img/icon-down.png" mode="widthFix"></image>
				</view>
				<view class="search-item" @click="toMap()">
					<view class="text">
						地图浏览
					</view>
				</view>
			</view>
			<view class="classify-type" v-if="queryParams.hyflParent">
				<u-scroll-list :indicator="false">
					<view class="item" :class="queryParams.hyflItemIndex === index?'active':''"
						v-for="(item, index) in hyList[queryParams.hyflIndex].data" :key="index"
						@click="chooseHyflItem(item,index)">
						{{item.typeName}}
					</view>
				</u-scroll-list>
			</view>
		</view>
		<view class="main">
			<view class="user-card" v-for="(item,index) in lists" :key="index">
				<view class="top">
					<view class="tips">
						<view class="tip flexAJC" style="background: #FFE6AE;color: #E1A826;" v-if="item.sign">
							{{item.sign}}
						</view>
						<view class="tip flexAJC" style="background: #FFC3C3;color: #D73030;">
							{{typeList[item.type].label}}
						</view>
						<view class="tip flexAJC" style="background: #B2CEFF;color: #326ED5;" v-if="item.sfrz==1">
							已认证
						</view>
					</view>
					<view class="user">
						<view class="name-wrap">
							<view class="name">
								{{item.memberName}}
							</view>
							<view class="label">
								{{item.position}}
							</view>
							<image class="vip" src="../../../static/img/vip-icon.png" mode="widthFix"></image>
						</view>
						<view class="ads">
							<image class="icon" src="../../../static/img/gongsi.png" mode="widthFix"></image>
							{{item.companyName}}
						</view>
						<view class="ads">
							<image class="icon" src="../../../static/img/dizhi.png" mode="widthFix"></image>
							{{item.address}}
						</view>
					</view>
					<view class="avatar">
						<u-avatar size="80rpx" :src="item.headImg?fileServer+item.headImg:null"></u-avatar>
						<view class="text">
							已有<text style="font-weight: bold;">{{item.lxNum||0}}</text>人联系
						</view>
					</view>
				</view>
				<view class="content">
					主营品牌产品：{{item.zypphcp}}
				</view>
				<view class="content">
					销售渠道：{{item.xsqudao}}
				</view>
				<view class="btn-list">
					<view class="btn flexAJC" style="background-color: #43B83E;">
						<image class="icon" mode="widthFix" src="../../../static/img/whatsappIcon.png"></image>
						语音
					</view>
					<view class="btn flexAJC" style="background-color: #FA9932;">
						<image class="icon" mode="widthFix" src="../../../static/img/shipin-white.png"></image>
						视频
					</view>
					<view class="btn flexAJC" style="background-color: #4FBFE7;" @click="toNav(item)">
						<image class="icon" mode="widthFix" src="../../../static/img/dizhi-white.png"></image>
						导航
					</view>
					<view class="btn flexAJC" style="background-color: #598FEE;">
						<image class="icon" mode="widthFix" src="../../../static/img/Telephone-white.png"></image>
						电话
					</view>
					<view class="btn flexAJC" style="background-color: #16C40B">
						<image class="icon" mode="widthFix" src="../../../static/img/liaoyilia-green.png"></image>
						聊聊
					</view>
				</view>
				<view class="genjin-list" style="margin-top: 20rpx;">
					<view class="item">
						跟进记录：{{item.gjjlNum}}次
					</view>
					<view class="item">
						操作记录：{{item.czjlNum}}次
					</view>
				</view>
				<view class="genjin-list" v-if="item.newNoteInfo">
					<view class="item">
						{{item.newNoteInfo}}
					</view>
				</view>
				<view class="genjin-list">
					<view class="item">
						合作意向度{{item.hzmyd}}、{{item.khsx}}
					</view>
				</view>
				<view class="genjin-list">
					<view class="item">
						备注：{{item.beizhu}}
					</view>
				</view>
				<view class="btn-list">
					<view class="btn big flexAJC" style="background-color: #FA8232;" @click="addNote(item)">
						添加记录
					</view>
					<view class="btn big flexAJC" style="background-color: #40ADFC;" @click="lookNote(item)">
						查看记录
					</view>
					<view class="btn flexAJC" style="background-color: #7DC84E;" @click="editMemo(item)">
						编辑
					</view>
					<view class="btn big flexAJC" style="background-color: #EE3C3C;" @click="setMemo(item)">
						设置提醒
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="status!='loading'&&lists.length==0"
		        mode="data"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
		<u-loadmore :status="status" v-else />

		<view class="btm-wrap-tc">

		</view>
		<view class="btm-wrap">
			<button open-type="share" class="btn confim-btn">
				邀请客户添加
			</button>
			<view class="btn confim-btn" @click="toAdd">
				添加客户
			</view>
		</view>
		<u-picker :show="provincesShow" :columns="provinces" @cancel="provincesShow = false"
			@confirm="chooseProvinces"></u-picker>
		<u-picker :show="hyShow" :columns="hyList" @cancel="hyShow = false" @confirm="chooseHyParent"></u-picker>
		<u-popup :show="noteShow" @close="noteShow = false">
			<view style="padding: 32rpx;">
				<u-form labelWidth="220rpx" labelPosition="top">
					<u-form-item label="内容：" prop="content">
						<view style="height: 20rpx;"></view>
						<u--textarea v-model="gjForm.content" placeholder="请输入内容"></u--textarea>
					</u-form-item>
					<u-form-item label="记录类型：" prop="content">
						<view style="height: 20rpx;"></view>
						<u-radio-group v-model="gjForm.type" placement="column">
							<u-radio label="跟进记录" name="1"></u-radio>
							<view style="height: 20rpx;"></view>
							<u-radio label="操作记录" name="0"></u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
				<u-button type="primary" shape="circle" text="添加" @click="submitNote()"></u-button>
			</view>
		</u-popup>
		<u-popup :show="setNoteShow" @close="setNoteShow = false">
			<view style="padding: 32rpx;">
				<u-form labelWidth="220rpx">
					<u-form-item label="提醒时间：" prop="fzqy" @click="setNoteTimeShow = true">
						<u-input v-model="setForm.timeShow" placeholder="点击选择" border="none" inputAlign="right" disabled
							disabledColor="#ffffff" />
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="提醒内容：" prop="content">
						<view style="height: 20rpx;"></view>
						<u--textarea v-model="setForm.content" placeholder="请输入提醒内容"></u--textarea>
					</u-form-item>
				</u-form>
				<u-button type="primary" shape="circle" text="添加" @click="submitSetNote()"></u-button>
			</view>
		</u-popup>
		<u-datetime-picker :show="setNoteTimeShow" v-model="setForm.time" mode="datetime" @confirm="chooseNoteTime"
			@cancel="setNoteTimeShow=false"></u-datetime-picker>
	</view>
</template>

<script>
	import cellGroup from '../../../uni_modules/uview-ui/libs/config/props/cellGroup';
	export default {
		data() {
			return {
				provincesShow: false,
				noteShow: false,
				setNoteShow: false,
				setNoteTimeShow: false,
				queryParams: {
					province: '',
					type: '',
					typeName: '',
					hyflParent: '',
					hyflIndex: '',
					hyflItemIndex: '',
					hyfl: '',
				},
				lists: [],
				status:'loading',//loading / nomore
				pageIndex:1,
				total:0,
				fileServer: this.$fileServer,
				keyword: '',
				typeList: [],
				provinces: [
					[
						'北京市', '天津市', '河北省', '山西省', '内蒙古自治区',
						'辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省',
						'浙江省', '安徽省', '福建省', '江西省', '山东省',
						'河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区',
						'海南省', '重庆市', '四川省', '贵州省', '云南省',
						'西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区',
						'新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'
					]
				],
				hyList: [],
				gjForm: {
					content: '',
					type: '1',
					custombwlId: ''
				},
				setForm: {
					time: '',
					timeShow: '',
					content: '',
					custombwlId: ''

				}
			};
		},
		onShow() {
			this.typeList = getApp().globalData.typeList
			this.lists = []
			this.pageIndex = 1
			this.getList()
		},
		onLoad() {
			this.getHylbList()
		},
		onReachBottom() {
			++this.pageIndex
			this.getList()
		},
		methods: {
			search() {
				this.lists = []
				this.pageIndex = 1
				this.getList()
			},
			toNav(item) {
				console.log('Number(item.lat)', Number(item.lat));
				uni.openLocation({
					latitude: Number(item.lat),
					longitude: Number(item.lng)
				})
			},
			shareMemo() {

			},
			toMap() {
				uni.navigateTo({
					url: "/pages/client/mapMemo/mapMemo?type=khbwl"
				})
			},
			formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				const hours = ('0' + date.getHours()).slice(-2);
				const minutes = ('0' + date.getMinutes()).slice(-2);

				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`;
				return formattedTime;
			},
			chooseNoteTime(e) {
				this.setForm.time = e.value
				this.setForm.timeShow = this.formatTimestamp(e.value)
				this.setNoteTimeShow = false
			},
			submitNote() {
				if (uni.$u.test.isEmpty(this.gjForm.content)) {
					uni.showToast({
						title: "请输入内容",
						icon: "none"
					})
					return false
				}
				this.$api.custom.addCustomNote(this.gjForm).then(res => {
					this.gjForm.content = ''
					uni.showToast({
						title: "添加成功",
					})
					setTimeout(() => {
						this.pageIndex = 1
						this.getList()
						this.noteShow = false
					}, 1500)
				})
			},
			submitSetNote() {
				if (uni.$u.test.isEmpty(this.setForm.content)) {
					uni.showToast({
						title: "请输入内容",
						icon: "none"
					})
					return false
				}
				wx.requestSubscribeMessage({
					tmplIds: ['OSBIW6CEbGoEbWnCwfIvIYgosrDx0ESjQ--r35rB30M'],
					success: (res) => {
						console.log('res', res);
						if (res['OSBIW6CEbGoEbWnCwfIvIYgosrDx0ESjQ--r35rB30M'] === "accept") {
							this.$api.custom.addCustomTixing(this.setForm).then(res => {
								this.setForm.content = ''
								uni.showToast({
									title: "设置成功",
								})
								this.setNoteShow = false
							})
						}
					}
				})
			},
			addNote(item) {
				this.gjForm.custombwlId = item.id
				this.noteShow = true
			},
			lookNote(item) {
				uni.navigateTo({
					url: "/pages/client/memoNoteList/memoNoteList?id=" + item.id
				})
			},
			editMemo(item) {
				uni.navigateTo({
					url: "/pages/client/memoAdd/memoAdd?id=" + item.id,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: item
						})
					}
				})
			},
			setMemo(item) {
				this.setForm.custombwlId = item.id
				this.setForm.time = Number(new Date())
				this.setForm.timeShow = this.formatTimestamp(Number(new Date()))
				this.setNoteShow = true
			},
			chooseHyflItem(i, idx) {
				this.queryParams.hyfl = i.id
				this.queryParams.hyflItemIndex = idx
				this.pageIndex = 1
				this.getList()
			},
			chooseHyfl() {
				uni.showActionSheet({
					itemList: this.hyList.map(i => {
						return i.hyflName
					}),
					success: (res) => {
						this.queryParams.hyflItemIndex = ''
						this.queryParams.hyflParent = this.hyList[res.tapIndex].hyflName
						this.queryParams.hyflIndex = res.tapIndex
						this.$forceUpdate()
					}
				})

			},
			chooseHy() {
				uni.showActionSheet({
					itemList: getApp().globalData.typeList.map(i => {
						return i.label
					}),
					success: (res) => {
						this.queryParams.type = getApp().globalData.typeList[res.tapIndex].value
						this.queryParams.typeName = getApp().globalData.typeList[res.tapIndex].label
						this.pageIndex = 1
						this.getList()
						this.$forceUpdate()
					}
				})
			},
			getHylbList() {
				this.$api.company.getHylbList({
					type: this.queryParams.type
				}).then(res => {
					this.hyList = res.data
				})
			},
			chooseProvinces(e) {
				this.queryParams.province = e.value[0]
				this.provincesShow = false
				this.pageIndex = 1
				this.getList()
			},
			toAdd() {
				uni.navigateTo({
					url: "/pages/client/memoAdd/memoAdd"
				})
			},
			getList() {
				this.$api.custom.getCustombwlList({
					...this.queryParams,
					pageIndex: this.pageIndex,
					pageSize:10,
				}).then(res => {
					uni.stopPullDownRefresh(); // 关闭下拉刷新 
					if(res.code==200){
						this.total = res.total
						if(this.pageIndex==1){
							this.lists = res.rows
						}else{
							this.lists = this.lists.concat(res.rows)
						}
						if(this.lists.length<res.total){
							this.status = 'loadmore';
						}else{
							this.status = 'nomore';
						}
					}
				})
			},
		},
		//上拉加载
		onReachBottom() {
			if(this.status == 'nomore'){
				return false
			}
			this.pageIndex++;
			this.getList();
		},
		onPullDownRefresh () {
		  this.pageIndex = 1;
		  this.getList();
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
			console.log(res)
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log('999')
		    }
			let yqrId = uni.getStorageSync("memberId")||''; //此处配置微信小程序的AppId
		    return {
		        title: '备忘录', //分享的名称
		        path: `/pages/client/memoAdd/memoAdd?yqrId=${yqrId}`,
		        
		    }
		},
		// #endif
		
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F5F5;min-height: 100vh;

		.top-view {
			width: 100%;
			background-color: #fff;
			padding: 20rpx 32rpx 0;

			.search-wrap {
				width: 100%;
				padding: 28rpx 0 24rpx;

				.search-item {
					height: 44rpx;
					display: flex;
					align-items: center;

					.text {
						font-size: 32rpx;
						line-height: 44rpx;
					}

					.down {
						width: 29rpx;
						height: auto;
					}
				}
			}

			.classify-type {
				margin-top: 24rpx;

				.item {
					width: auto;
					height: 56rpx;
					background: #EBEBEB;
					border-radius: 28rpx;
					padding: 0 12rpx;
					display: inline-block;
					margin-right: 20rpx;
					font-size: 28rpx;
					white-space: nowrap;
					line-height: 56rpx;

					&.active {
						background: #EC2424;
						color: #fff;
					}
				}
			}

		}

		.main {
			position: relative;
			padding: 20rpx;
			overflow: hidden;

			.user-card {
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 24rpx;

				.top {
					width: 100%;
					display: flex;
					padding-bottom: 16rpx;
					margin-bottom: 18rpx;
					border-bottom: 1px solid #F0F0F0;

					.tips {
						width: 118rpx;
						border-radius: 6rpx;
						overflow: hidden;
						flex-shrink: 0;

						.tip {
							width: 100%;
							height: 40rpx;
						}
					}

					.user {
						flex: 1;
						padding: 0 0 0 12rpx;

						.name-wrap {
							line-height: 44rpx;

							.name {

								font-size: 32rpx;
								font-weight: bold;
								margin-right: 10rpx;
								display: inline-block;
							}

							.label {
								font-size: 24rpx;
								color: #AAAAAA;
								display: inline-block;
								margin-right: 6rpx;
							}

							.vip {
								display: inline-block;
								width: 34rpx;
								height: auto;
							}

							.dept {
								width: auto;
								display: inline-block;
								height: 36rpx;
								border-radius: 18rpx;
								border: 1px solid #DE3333;
								color: #DE3333;
								font-size: 24rpx;
								padding: 0 20rpx;
								line-height: 34rpx;
							}
						}

						.ads {
							color: #777777;
							font-size: 28rpx;
							line-height: 40rpx;

							.icon {
								display: inline-block;
								width: 24rpx;
								height: auto;
								margin-right: 6rpx;
							}
						}
					}

					.avatar {
						flex-shrink: 0;
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.tx {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
						}

						.text {
							margin-top: 40rpx;
							font-size: 24rpx;
						}
					}

					.avatar-left {
						width: 88rpx;
						height: 88rpx;
						position: relative;

						.tx {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}

						.vip {
							position: absolute;
							right: 0;
							top: 0;
							width: 28rpx;
							height: auto;
						}
					}

					.talk-btn {
						width: 120rpx;
						height: 50rpx;
						background: #16C40B;
						border-radius: 25rpx;
						color: #FFFFFF;
						font-size: 24rpx;
						align-self: center;

						.icon {
							width: 24rpx;
							height: auto;
							margin-right: 4rpx;
						}
					}

				}

				.content {
					color: #AAAAAA;
					line-height: 40rpx;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				.btn-list {
					margin-top: 10rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						width: 120rpx;
						height: 50rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						border-radius: 25rpx;

						&.big {
							width: 152rpx;
						}

						.icon {
							width: 24rpx;
							height: auto;
							margin-right: 4rpx;
						}
					}
				}

				.content-text {
					padding: 20rpx 0 0 0;
					font-size: 28rpx;
					border-top: 1px solid #F0F0F0;
				}

				.genjin-list {
					border-top: 1px solid #F0F0F0;
					padding: 20rpx 0 18rpx;

					.item {
						line-height: 40rpx;
						color: #AAAAAA;
						font-size: 28rpx;
						display: inline-block;

						&:nth-child(n+0) {
							margin-right: 50rpx;
						}
					}
				}
			}
		}
	}

	.btm-wrap-tc {
		width: 100%;
		height: 170rpx;

	}

	.btm-wrap {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 99;
		height: 134rpx;
		box-shadow: 0px -4rpx 8rpx 0px rgba(0, 0, 0, 0.05);
		background: #FFFFFF;

		.btn {
			width: 244rpx;
			height: 70rpx;
			border-radius: 42rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			margin: 0;

			&.confim-btn {
				color: #FFFFFF;
				background: #EC2424;
			}
		}
	}
</style>